import classs from './Todolist.module.scss'
import {useContext,useState} from 'react'
import ContextTodo from './todoContext'
const Todohead = () => {
  const Context=useContext(ContextTodo)
  const [date,setDate] = useState('')
  const [title,setTitle] = useState('')
  const [priority,setPriority] = useState('')
  const dateChange=(val)=>{
    let date=val.target.value
    setDate(date)
  }
  const titleChange=(val)=>{
    let title=val.target.value
    setTitle(title)
  }
  const priorityChange=(val)=>{
    let priority=val.target.value
    setPriority(priority)
  }
  // 添加按钮
  const add=()=>{
    let data={
      date,
      title,
      priority
    }
    Context.updateList(data)
    setDate('')
    setTitle('')
    setPriority('')
  }
  return (
    <div className={classs.Todohead}>
      <div className='Domeformbox'>
        <div>
          日期：<input type="date" value={date} onChange={dateChange}/>
        </div>
        <div>
          标题：<input type="text" value={title} onChange={titleChange}/>
        </div>
        <div>
          优先级：<input type="text" value={priority} onChange={priorityChange}/>
        </div>
      </div>
      <button className={classs.but} style={{  width: 80, height: 50 }} onClick={add}>添加</button>
    </div>
  );
}

export default Todohead;